<template>
  <div>
    <div class="banner-container">
      <swiper class="banner" :options="swiperListOption" @swiper="onSwiper" @slideChange="onSlideChange">
        <swiper-slide v-for="item in swiperList" :key="item.id">
          <img style="width: 100%;cursor: pointer;height: 440px;" :data-id="item.id" :src="item.adImagePath" alt="">
          <!--<img style="width: 100%;" :data-id="item.id"  src="http://localhost/static/images/dx-swiper.jpg" alt="">-->
        </swiper-slide>
      </swiper>
      <div class="swiper-pagination1"></div>
    </div>
    <div class="login-box-container">
      <div class="login-container" v-if="!$store.state.user.token">
        <Login :title="'欢迎登录'" />
      </div>
      <div class="account-container" v-else>
        <UserInfo />
      </div>
    </div>
    <!--  流程进度条-->
    <div class="indexBg">
      <div class="select-course-filter" :key="item.id" v-for="item in adsList" @click="toSwiper(item)">
        <img :src="item.adImagePath" alt="">
      </div>

      <div class="signUp">
        <div v-for="item in adsList2" :key="item.id" @click="toSwiper(item)">
          <img :src="item.adImagePath" alt="">
        </div>
      </div>
    </div>

    <div class="container clearfix">
      <div class="news-content">
        <header class="header-sty clearfix">
          <div class="title-logo"></div>
          <div class="title">
            <h1>新闻动态</h1>
            <span>News</span>
          </div>
        </header>
        <section>
          <img src="~@assets/images/news-content.jpg" alt="">
        </section>
      </div>
      <div class="rulesList">
        <ul class="list-nav">
          <li class="notice-content" :class="noticeType == 1 ? 'avtive' : ''" @click="noticeType = 1">通知公告</li>
          <li class="policy-content" :class="noticeType == 2 ? 'avtive' : ''" @click="noticeType = 2">政策法规</li>
        </ul>
        <!--通知公告-->
        <ul class="notice-content-list content-list clearfix" v-if="noticeType == 1">
          <li class="clearfix" v-for="item in noticeList" :key="item.id">
            <div class="content-item">
              <h3 @click="toDetail(item.id, 'notice')" title="个人申请发票说明" class="title">{{ item.title }}</h3>
              <div class="ellipsis-two notice ">{{ item.content }}</div>
            </div>
            <div class="date" v-if="item.publisherTime">
              <div class="date-day">{{ item.publisherTime.substring(8, 10) }}</div>
              <span>{{ item.publisherTime.substring(0, 7) }}</span>
            </div>
          </li>

        </ul>
        <ul class="notice-content-list content-list clearfix" v-if="noticeType == 2">
          <li class="clearfix" v-for="item in officialtrainingList" :key="item.id">
            <div class="content-item">
              <h3 @click="toDetail(item.id, 'notice')" title="个人申请发票说明" class="title">{{ item.title }}</h3>
              <div class="ellipsis-two notice ">{{ item.content }}</div>
            </div>
            <div class="date" v-if="item.publisherTime">
              <div class="date-day">{{ item.publisherTime.substring(8, 10) }}</div>
              <span>{{ item.publisherTime.substring(0, 7) }}</span>
            </div>
          </li>

        </ul>
        <a class="more-arrow" @click="toMore()">查看更多 <i class="el-icon el-icon-caret-right"></i></a>
      </div>
    </div>


    <div class="recommend-course-container">
      <div class="recommend-course clearfix">
        <header class="header-sty clearfix">
          <div class="title-logo"></div>
          <div class="title">
            <h1>推荐课程</h1>
            <span>Recommendation course</span>
          </div>
        </header>

        <section>
          <ul>
            <li v-for="item in recommendCourseList" :key="item.id">
              <div class="course-img" @click="toClass(item.id)">
                <img src="~@assets/images/course_login.png" v-real-img="item.picPath" alt="">
              </div>
              <div class="credit" v-if="item.credit">{{item.credit}}学时</div>
              <div class="bottom">
                <div class="title ellipsis-one" :title="$utils.unEscapeHTML(item.name)" @click="toClass(item.id)">
                  {{ $utils.unEscapeHTML(item.name) }}
                </div>
                <div>
                  <img src="~@assets/images/userIcon.png" alt="">
                  <span>{{ item.teacherName }}</span>
                </div>
              </div>
            </li>
          </ul>
        </section>
      </div>
      <div class="free-course"  v-if="adsList3.length !==0 ">
        <header class="header-sty clearfix">
          <div class="title-logo"></div>
          <div class="title">
            <h1>免费资源</h1>
            <span>Free course</span>
          </div>
        </header>
        <div class="signUp" style="display: flex;justify-content: space-between;">
          <div v-for="item in adsList3" :key="item.id" @click="toSwiper(item)">
            <img :src="item.adImagePath" alt="">
          </div>
        </div>
      </div>
    </div>


     <div class="commone-asked-container">
      <div class="commone-asked">
        <header>
          <h1>帮助中心</h1>
          <span>Help center</span>
        </header>
        <section>
          <ul>
            <li>
              <h3 @click="$router.push('/help-center')">培训须知</h3>
              <p><a @click="$router.push('/help-center')" :title="$store.state.app.footer.trainingInstructionsSummary" class="ellipsis-two">{{$store.state.app.footer.trainingInstructionsSummary}}</a></p>
            </li>
            <li>
              <h3 @click="toHelpCenter('2')">操作说明</h3>
              <p><a @click="toHelpCenter('2')" :title="$store.state.app.footer.operatingSummary"  class="ellipsis-two">{{$store.state.app.footer.operatingSummary}}</a></p>
            </li>
          </ul>
          <div class="rf-item">
            <div style="float:left; width: 50%;">
              <h3>联系我们</h3>
              <h4 style="font-size: 15px;" v-if="$store.state.app.footer.customerPhones" v-for="(item,index) in $store.state.app.footer.customerPhones" :key="index">
                {{item}}
              </h4>
            </div>
            <div style="float:left;width: 50%; text-align:center;">
              <h3>微信扫码咨询客服</h3>
              <img :src="$store.state.app.footer.customerErCodePath" style="width: 143px;" alt="">
            </div>
          </div>
        </section>

      </div>
    </div>

    <!--飘窗-->
    <div id="Div2" style="position:relative;z-index: 99999;" v-show="pcImgList.length !== 0 && pcImgFlag">
      <img style="cursor:pointer;"  @click="openUrl(pcImgList[0].adOpenWay,pcImgList[0].adUrl)"
           :src="pcImgList[0] &&pcImgList[0].adImagePath" alt="">
      <i style="position:absolute;right: 10px;top: 10px;cursor:pointer;font-size: 18px;"
         class="el-icon-circle-close el-icon"  @click="pcImgFlag = false"></i>
    </div>
  </div>
</template>

<script>
import index from "./indexjs";

export default {
  ...index
}
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";
@import "index";
</style>
